<div id="tableWrapperID">
  <div id="tableWrapperHeaderID">
    <span>
      <%=t('list.categories')%>
    </span>
  </div>
  <div id="tableWrapperBodyID">
    <span class="tooltip">
      <span><%=t('tooltip.record.add')%></span>
      <%= link_to t('add.item'), new_category_path, :class => "link" %>
    </span>
    <%= form_tag(sort_categories_path, :id =>"categorySortingFormId", :method=>:post, :remote => true, :class => "category-sorting-form") do -%>
        <div class="category-sorting-form">
           <%= label_tag "field", t('sorting_by'), :class => "statistic-date-label", :style => "font-weight: bold;"%>
           <%= select_tag "field", getCategoriesSortingOptionList.html_safe , :id => "field"%>
           <%= select_tag "direction", getSortingDirectionOptionList.html_safe , :id => "direction"%>
        </div>
    <% end -%>
    <table id="dataTableID" >
      <thead>
          <tr>
            <th id="editButtonsHeaderID">&nbsp;</th>
            <th id="categoryColorHeaderID">
                <%=t('field.category.color')%>
            </th>
            <th id="categoryNameHeaderID">
                <%=t('field.common.name')%>
            </th>
            <th id="categoryDescriptionHeaderID">
                <%=t('field.common.description')%>
            </th>
            <th></th>
            <th></th>
          </tr>
      </thead>
    </table>
    <div id="dataWrapperID"></div>
  </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
       categoriesJS.init();
    });
</script>








